<template>
  <div>
    <top-component></top-component>
    <title-component></title-component>
    <spacing-component :message="bigSpacingHeight" :show="trueShow"></spacing-component>
    <!-- 最佳答案 -->
    <!-- 问题1 -->
    <div @click="routerContent('1')">
      <answer :isBest="isBest" :show="show.show1"></answer>
    </div>
    <spacing-component :message='normalSpacingHeight' :show="falseShow"></spacing-component>
    <!-- 优质答案 -->
    <!-- 问题2 -->
    <div @click="routerContent('2')">
      <answer :isGreat="isGreat" :show="show.show2"></answer>
    </div>
    <spacing-component :message="smallSpacingHeight" style="margin:5px 0"></spacing-component>
    <!-- 问题3 -->
    <div @click="routerContent('3')">
      <answer :show="show.show3"></answer>
    </div>
    <spacing-component :message="smallSpacingHeight" style="margin:5px 0"></spacing-component>
    <!-- 问题4 -->
    <div>
      <answer :show="show.show4"></answer>
    </div>
    <spacing-component :message="smallSpacingHeight" style="margin:5px 0"></spacing-component>
    <!-- 问题5 -->
    <div>
      <answer :show="show.show5"></answer>
    </div>
    <!-- 结束 -->
    <!-- 查看更多 -->
    <spacing-component :message="normalSpacingHeight"></spacing-component>
    <div class="qu-more">
      <el-button type="warning" v-show="!isLoading" @click="upLoading">
        点击查看更多
      </el-button>
      <i class="el-icon-loading" v-show="isLoading"></i>
    </div>
  </div>
</template>

<script>
import TopComponent from './subComponent/Top.vue'
import TitleComponent from './subComponent/Title.vue'
import SpacingComponent from './subComponent/Spacing.vue'
import Answer from './subComponent/Answer.vue'
export default {
  data () {
    return {
      // 当前问题编号
      questionId: this.$route.query.id,
      // 后期需修改
      isLoading: false,
      // 后期需修改
      show: {
        show1: require('@/assets/images/ICons/medal/fir.png'),
        show2: require('@/assets/images/ICons/medal/sec.png'),
        show3: require('@/assets/images/ICons/medal/thir.png'),
        show4: require('@/assets/images/ICons/medal/four.png'),
        show5: require('@/assets/images/ICons/medal/five.png')
      },
      trueShow: true,
      falseShow: false,
      bigSpacingHeight: '30px',
      normalSpacingHeight: '20px',
      smallSpacingHeight: '5px',
      isBest: true,
      isGreat: true
    }
  },
  methods: {
    upLoading () {
      this.isLoading = true
      console.log('isLoading ok!')
      // console.log(this.$route.query.id)
    },
    routerContent (e) {
      this.$router.push({
        path: '/questionContent', query: { id: this.questionId, name: e } })
    }
  },
  components: {
    TopComponent,
    TitleComponent,
    SpacingComponent,
    Answer
  }
}
</script>
<style lang='scss'>
.qu-more {
  padding:20px 0 70px;
  text-align: center;
}
</style>
